<template>
	<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
		<view v-if="label" class="uni-combox__label" :style="labelStyle">
			<text>{{label}}</text>
		</view>
		<view class="uni-combox__input-box">
			<input class="uni-combox__input"  style="cursor: pointer;" type="text" :placeholder="placeholder" :disabled="!inputFlag"
				placeholder-class="uni-combox__input-plac" :focus="showSelector && inputFlag" @click="toggleSelector"
				@input="handleInput" v-model="inputVal">
			<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector" style="cursor: pointer;">
			</uni-icons>
		</view>
		<view class="uni-combox__selector" v-if="showSelector">
			<view class="uni-popper__arrow"></view>
			<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
				<view class="uni-combox__selector-empty" v-if="candidateList.length === 0">
					<text>{{emptyTips}}</text>
				</view>

				<block v-else>
					<view class="uni-combox__selector-item" @click="clearSelect(null)">
						<text style="color: #ff5353;">清除所选内容</text>
					</view>
					<view class="uni-combox__selector-item" v-for="(item,index) in candidateList" :key="item.id"
						@click="onSelectorClick(item)">
						<text>{{item.name}}</text>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'uniCombox',
		model: {
			prop: "modelVal",
			event: "input",
		},
		props: {
			modelVal: {
				type: String,
			},
			inputFlag: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: true
			},
			label: {
				type: String,
				default: ''
			},
			labelWidth: {
				type: String,
				default: 'auto'
			},
			placeholder: {
				type: String,
				default: ''
			},
			candidates: {
				type: Array,
				default () {
					return []
				}
			},
			emptyTips: {
				type: String,
				default: '无匹配项'
			},
			filterType: {
				type: String,
				default: 'filter' //filter or search
			},
		},
		data() {
			return {
				showSelector: false,
				inputVal: this.modelVal,
				candidateList: this.candidates
			}
		},
		computed: {
			labelStyle() {
				if (this.labelWidth === 'auto') {
					return ""
				}
				return `width: ${this.labelWidth}`
			},
		},
		watch: {
			candidates(newVal, oldVal) {
				this.candidateList = newVal
				let hasList = this.candidates.filter(item => item.name.indexOf(this.inputVal) > -1);
				if(hasList.length==0){
					this.inputVal="";
				}
			},
		},
		methods: {
			toggleSelector() {
				this.showSelector = !this.showSelector;
			},
			onSelectorClick(item) {
				if (item != null) {
					this.inputVal = item.name;
				} else {
					this.inputVal = "";
				}
				this.$emit('select', item)
				this.showSelector = false
			},
			clearSelect() {
				this.inputVal = "";
				if (this.filterType == 'filter') {
					this.candidateList = this.candidates;
				} else {
					this.$emit('input', e.target.value);
				}
				this.$emit('select', null);
				this.showSelector = false
			},
			handleInput(e) {
				if (this.filterType == 'filter') {
					this.candidateList = this.candidates.filter(item => item.name.indexOf(e.target.value) > -1);
				} else {
					this.$emit('input', e.target.value);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-combox {
		font-size: 14px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		padding: 6px 10px;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// height: 40px;
		flex-direction: row;
		align-items: center;
		// border-bottom: solid 1px #DDDDDD;
	}

	.uni-combox__label {
		font-size: 16px;
		line-height: 22px;
		padding-right: 10px;
		color: #999999;
	}

	.uni-combox__input-box {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		align-items: center;
	}

	.uni-combox__input {
		flex: 1;
		font-size: 14px;
		height: 22px;
		line-height: 22px;
	}

	.uni-combox__input-plac {
		font-size: 14px;
		color: #999;
	}

	.uni-combox__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 2;
		padding: 4px 0;
	}

	.uni-combox__selector-scroll {
		/* #ifndef APP-NVUE */
		max-height: 200px;
		box-sizing: border-box;
		/* #endif */
	}

	.uni-combox__selector-empty,
	.uni-combox__selector-item {
		/* #ifndef APP-NVUE */
		display: flex;
		cursor: pointer;
		/* #endif */
		line-height: 36px;
		font-size: 14px;
		text-align: center;
		// border-bottom: solid 1px #DDDDDD;
		padding: 0px 10px;
	}

	.uni-combox__selector-item:hover {
		background-color: #f9f9f9;
	}

	.uni-combox__selector-empty:last-child,
	.uni-combox__selector-item:last-child {
		/* #ifndef APP-NVUE */
		border-bottom: none;
		/* #endif */
	}

	// picker 弹出层通用的指示小三角
	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.uni-combox__no-border {
		border: none;
	}
</style>